<template>
  <div class="Line-Basic" ref="chart" v-resize="resize"></div>
</template>

<script>
import lineOptions from "@/MCharts/components/line/options";

export default {
  name: "MChartsLineBasic",
  data() {
    return {
      chart: null,
    };
  },
  props: {
    data: {},
    options: {},
    type: String,
    dispatchAction: {},
  },
  components: {},
  watch: {
    data: {
      handler: function (e) {
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let chartDom = this.$refs.chart;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom);

      this.chart = myChart;

      // 指定图表的配置项和数据
      var option = lineOptions.getOptions(this.data, this.options);

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear();
      myChart.setOption(option);
      this.myChart = myChart;
      // debugger
      if (this.dispatchAction) {
        setTimeout(() => {
          myChart.dispatchAction(this.dispatchAction);
          // myChart.dispatchAction({
          //   type: 'showTip',
          //   seriesIndex: 1,
          //   dataIndex: 5,
          // })
        }, 300);
      }
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
.Line-Basic {
  height: 100%;
  width: 100%;
}
</style>
